<template>
  <a-timeline class="time-line">
    <template v-if="dataList && dataList.length">
      <a-timeline-item v-for="(item, index) of dataList" :key="item.key || index">
        <template #dot>
          <i class="time-line-dot"></i>
        </template>
        <slot :data="item" :index="index" />
      </a-timeline-item>
    </template>
    <a-empty v-else class="emptyState" />
  </a-timeline>
</template>

<script>
export default {
  name: 'time-line',
  props: {
    dataList: { type: Array, default: () => [] },
  },
};
</script>

<style scoped lang="less">
.time-line {
  /deep/.emptyState {
    margin-top: 35%;
  }
  /deep/.emptyState .ant-empty-description {
    color: white;
  }
  .time-line-dot {
    display: block;
    width: 9px;
    height: 9px;
    background: #6acbc1;
    border-radius: 50%;
  }
  &.ant-timeline {
    /deep/.ant-timeline-item {
      .ant-timeline-item-head {
        background: transparent;
      }
      .ant-timeline-item-tail {
        border-color: rgba(106, 203, 193, 0.3);
      }
    }
  }
}
</style>
